<template>
	<view>
		<view class="comment-box">
			<view class="comment-item">
				<view>
					<image src="/static/img/avatar.png" class="comment-avatar"></image>
					<view class="comment-time">时间</view>
				</view>

				<view class="comment-info">
					<view class="comment-name">Baby Two</view>
					<view class="comment-content">
						评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容
					</view>
					<view class="comment-icon">
						<iconRow :currentProduct="comment" @clickMessage="shiftReply"></iconRow>
					</view>
					<view class="like-box" v-if="1">
						<image src="/static/icon/like1.png" class="like-icon"></image>
						<text class="like-name">点赞人，Baby Three, Baby One, Baby One, Baby One, 
							Baby One, Baby One, Baby One, Baby One, Baby One</text>
					</view>
					<!-- 回复框 -->
					<view class="reply-box" v-if="1">
						<view class="reply-every" v-for="item in 4">
							<view class="reply-name">Baby Three:</view>
							<view class="reply-comtent">回复内容回复内容回复内容回复内容回复内容</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="border: 2rpx solid #eee;"></view>
	</view>
</template>

<script setup lang="ts">
	import { ref,defineEmits} from 'vue'
	import { Product } from '../../../types/types';
	import iconRow from '../../../components/iconRow.vue';
	const emits = defineEmits()
	const comment = ref<Product>({
		id: 1,
		image: '/static/img/like1.jpg',
		storeName: 'Baby Three',
		likes: 1.231,
		desc: '小猫衣橱小猫衣橱小猫衣橱小猫衣橱小猫衣橱小猫衣橱小猫衣橱121313衣橱'
	},)
	const shiftReply = ()=>{
		emits('shiftReply')
	}
</script>

<style scoped lang="scss">
	.comment-box {
		width: 100%;
		padding: 0.5rem;
		box-sizing: border-box;
		// background-color: #def;
	}

	.comment-item {
		display: flex;
	}

	.comment-avatar {
		width: 2.44rem;
		height: 2.44rem;
	}

	.comment-time {
		width: 2.44rem;
		height: 0.88rem;
		line-height: 0.88rem;
		color: rgba(16, 16, 16, 0.8);
		font-size: 0.63rem;
		text-align: center;
		margin-top: 0.4rem;
	}

	.comment-info {
		margin-left: 0.5rem;
	}

	.comment-name {
		width: 4.88rem;
		height: 1rem;
		line-height: 1rem;
		color: rgba(16, 16, 16, 1);
		font-size: 0.75rem;
		text-align: left;
		font-weight: 600;
	}

	.comment-content {
		margin-top: 0.4rem;
		width: 92%;
		color: rgba(16, 16, 16, 1);
		font-size: 0.69rem;
		text-align: left;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.comment-icon {
		width: 13rem;
		margin-top: 0.2rem;
	}

	.like-box {
		margin-top: 0.3rem;
		position: relative;
	}

	.like-icon {
		position: absolute;
		width: 1rem;
		height: 1rem;
		top: 0.3rem;
	}

	.like-name {
		width: calc(92% - 1.5rem);
		color: rgba(16, 16, 16, 0.8);
		font-size: 0.63rem;
		text-align: left;
		margin-left: 1.5rem;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	.reply-box{
		width: 95%;
		height: auto;
		min-height: 2rem;
		border-radius: 0rem 0rem 0.63rem 0.63rem;
		color: rgba(16,16,16,1);
		font-size: 0.63rem;
		text-align: left;
		border: 0.06rem solid rgba(187,187,187,0.5);
		margin-top: 0.2rem;
		padding: 0.2rem;
		box-sizing: border-box;
		background-color: #dee
	}
	.reply-every{
		width: 100%;
		display: flex;
		color: rgba(16,16,16,1);
		font-size: 0.63rem;
		text-align: left;
	}
	.reply-name{
		width: auto;
		white-space: nowrap;
	}
	.reply-comtent{
		margin-left: 0.2rem;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}
</style>